<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div style="margin: 10px auto; width: 90%">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
      </div>
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @change="onChange"
          @finish="onFinish"
        />
      </van-popup>
      <van-cell-group inset class="group">
        <van-field
          v-model="placeXX"
          rows="5"
          autosize
          label="详细地址"
          type="textarea"
          placeholder="请输入详细地址例：XX小区XX栋XX单元XX室"
        >
        </van-field>
      </van-cell-group>
      <div class="DI WZ_size_16" @click="BDXX">
        预 约
        <!-- <view class="DI_bottom">

			</view> -->
      </div>
    </div>
    <RelsXX
      @calendar="calendar"
      @closeCalendar="closeCalendar"
      :dateshow="dateshow"
    />
  </div>
</template>

<script>
import moment from "moment";
import { getgoods } from "../../common/SPXX";
import { getAccessToken } from "../../common/YYSLxx.js"
import headerXX from "../../components/title.vue";
import RelsXX from "../../components/Rels.vue";
import { Toast } from "vant";
import {
  getAddressCityList,
  getAddressTownList,
} from "@/api/realAssets/icsharedstation/address_select/index.js";
export default {
  components: { headerXX, RelsXX },
  data() {
    return {
      placeXX: "",
      title: "上门保洁",
      fieldValue: "",
      show: false,
      cascaderValue: "",
      options: [],
      dateshow: false,
      decodedString: {},
    };
  },
  created() {
    getAddressCityList({
      provinceid: 420000,
    }).then((res) => {
      console.log(res.data);
      this.options = res.data.map((item) => {
        return { text: item.city, value: item.cityid, children: [] };
      });
    });
  },
  mounted() {},
  methods: {
    closeCalendar(val) {
      this.dateshow = val;
    },
    calendar(e) {
      this.dateshow = false;
      this.decodedString = JSON.parse(
        decodeURIComponent(getgoods().replace(/%25/g, "%"))
      );
      const currentTimeStamp = moment().unix();
      const min = BigInt("1" + "0".repeat(18));
      const max = BigInt("1" + "0".repeat(19));
      const randomNum =
        min + BigInt(Math.floor(Math.random() * Number(max - min)));
      let itemXX = {
        SBBT: "上门家政",
        orderNumber: currentTimeStamp + randomNum.toString(), //预约编号
        siteId: JSON.parse(localStorage.getItem("siteData")).id, //服务点id
        orderProject: "上门家政", //预约项目
        orderProjectType: "0", //0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), //下单时间
        goodInfo: this.decodedString,
        estimateArrivalTime: e, //预计服务时间
        estimateArrivalTimeTitle: "服务时间",
        estimateSumPrice: "", //预估费用
        orderSubType: "", //预约类型
        serviceDescription: "", //服务介绍
        orderLocation: this.fieldValue + "(" + this.placeXX + ")", //预约地址(非空展示)
        serviceTip: "", //温馨提示(非空展示)
        goodSumPrice: "", //总价
        serviceTitleList: ["服务项目", "服务人员", "性别", "年龄"], //服务标题
        companyId: this.decodedString[0].companyId,
        goodList: [
          {
            goodId: this.decodedString[0].goodId,
            goodName: this.decodedString[0].goodManufacturer,
            servicePrice: this.decodedString[0].goodTrueName,
            serviceQty: this.decodedString[0].gender,
            goodCountPrice: this.decodedString[0].age,
            serviceProjectName: "",
            serviceProjectNameTitle: "",
            remark: "",
            remarkTitle: "",
            serviceMessage: "",
            serviceMessageTitle: "",
          },
        ], //商品列表,
      };
    //   console.log(itemXX);
      getAccessToken(itemXX, "上门家政")
    },
    onChange({ value }) {
      getAddressTownList({
        cityid: value,
      }).then((res) => {
        this.options.forEach((item) => {
          if (value == item.value) {
            item.children = res.data.map((item) => {
              return {
                text: item.area,
                value: item.areaid,
              };
            });
          }
        });
      });
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    BDXX() {
      if (this.placeXX == "") {
        Toast.fail("请填写上门地点");
        return;
      }
      this.dateshow = true;
      console.log(this.dateshow);
    },
  },
};
</script>

<style lang="less" scoped>
.group {
  margin-top: 20px;
}
.DI {
  position: fixed;
  z-index: 299;
  width: 90%;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -5px);
  text-align: center;
  font-weight: 600;
  //background: rgba(245, 245, 245, 1);
  height: 50px;
  line-height: 50px;
  background: rgb(2, 117, 113);
  color: #fff;
  border-radius: 5px;
  margin-bottom: 0px;
}
</style>
